<template>
  <div class="music_box">
    <div class="common_show_btn">
      <div class="bgMusic common_bg" @click="handleChangeBg">
        <div v-if="musicLink" class="music_name">
          <div class="video1">
            <img src="../../../../../../assets/images/video1.png" alt="" />
          </div>
          <div class="music_box">
            <img
              class="video2"
              src="../../../../../../assets/images/video2.png"
              alt=""
            />
            <span class="name">眼里都是你</span>
          </div>
        </div>
        <div
          class="tips_wrap"
          @mouseenter="showNo = false"
          @mouseleave="showNo = true"
        >
          <span class="name">{{ musicLink ? "更换" : "去设置" }}</span>
        </div>
        <div class="tips_wrapNo" v-if="!musicLink && showNo">
          <span class="name">未设置</span>
        </div>
      </div>
      <div class="btn_operat">
        <span @click="handleDefault">默认</span>
        <span v-if="musicLink" @click="handleClear">清除</span>
      </div>
    </div>
    <el-dialog
      :modal-append-to-body="false"
      :visible.sync="show"
      width="950px"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      @close="handleClose"
      custom-class="music_wrap"
    >
      <div class="img_container">
        <div class="head_wrap">
          <div class="nav_wrap">
            <div
              @click="handleChangeHeadBanner(item.id)"
              :class="{ active: currentHeadId === item.id }"
              class="nav_item"
              v-for="(item, index) in bannerHeadList"
              :key="index"
            >
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
        <div style="height: 500px">
          <template v-if="resourceList.length">
            <ul
              class="infinite-list"
              v-infinite-scroll="loadResource"
              style="overflow: auto"
              :infinite-scroll-disabled="disabled"
            >
              <li
                class="resource_item"
                v-for="(ele, i) in resourceList"
                :key="i"
              >
                <div class="img_wrap" @click="handleSelect(ele.link)">
                  <audio :controls="false" ref="myAudio" v-if="currentI === i">
                    <source :src="ele.link" type="audio/mp3" />
                  </audio>
                  <div class="video1" @click.stop="handleAudio(i)">
                    <img
                      v-if="showStart && currentI === i"
                      src="../../../../../../assets/images/video3.png"
                      alt=""
                    />
                    <img
                      v-else
                      src="../../../../../../assets/images/video1.png"
                      alt=""
                    />
                  </div>
                  <div class="music_box">
                    <img
                      class="video2"
                      src="../../../../../../assets/images/video2.png"
                      alt=""
                    />
                    <span class="name">{{ ele.name }}</span>
                  </div>
                  <div class="use">使用</div>
                  <div v-if="ele.checked" class="currentUse">当前使用</div>
                </div>
              </li>
            </ul>
          </template>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    musicLink: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      showNo: true,
      show: false,
      currentHeadId: 0,
      bannerHeadList: [],
      resourceList: [],
      query: {
        pageNum: 1,
        pageSize: 20,
        tagId: null,
        type: "BG_MUSIC",
        userId: 0,
      },
      showStart: false,
      currentI: "",
    };
  },
  watch: {
    currentI() {
      this.showStart = false;
    },
    musicLink: function (val) {
      console.log(val, "val");
      this.musicLink = val;
    },
  },
  methods: {
    //点击head找到对应的图片资源
    handleChangeHeadBanner(id) {
      this.currentHeadId = id;
      //修改id
      this.resourceList = [];
      this.query.tagId = id; //id
      this.query.pageNum = 1;
      this.disabled = false;
      this.loadResource();
    },
    handleAudio(i) {
      this.currentI = i;
      this.$nextTick(() => {
        let audio = this.$refs.myAudio[0];
        console.log(audio);
        if (!this.showStart) {
          audio.play();
        } else {
          audio.pause();
        }
        this.showStart = !audio.paused;
        console.log(audio.paused);
      });
    },
    handleClose() {
      this.resourceList = [];
      this.query.pageNum = 1;
      this.disabled = false;
    },
    handleSelect(link) {
      this.musicLink = link;
      this.show = false;
      this.$emit("handleMusic", link);
    },
    handleChangeBg() {
      this.getResourceTag();
    },
    //获取资源标签
    getResourceTag() {
      this.$api("resource.getResourceTag", {
        type: "BG_MUSIC",
      }).then((res) => {
        console.log(res);
        this.bannerHeadList = res;
        this.bannerHeadList.unshift({
          name: "全部",
          id: "",
        });
        this.currentHeadId = this.bannerHeadList[0].id;
        this.show = true;
        this.loadResource();
      });
    },
    loadResource() {
      this.getResourceBanner();
    },
    //获取资源图片
    getResourceBanner() {
      this.$api("resource.getResource", this.query).then((res) => {
        this.resourceList.push(...res.data);
        if (res.data.length >= this.query.pageSize) {
          //就不能再+1了
          this.query.pageNum++;
        } else {
          this.disabled = true;
        }
        this.resourceList.forEach((ele) => {
          if (this.musicLink === ele.link) {
            ele.checked = true;
            // this.current = ele;
          }
        });
        console.log(this.resourceList, "this.resourceList");
      });
    },
    handleDefault() {
      console.log(1);
      this.musicLink = "";
      this.$emit("handleMusicDefault");
    },
    handleClear() {
      console.log(1);
      this.musicLink = "";
      this.$emit("handleMusicDefault");
    },
  },
};
</script>
<style lang="scss" scoped>
.music_box {
  ::v-deep.music_wrap {
    margin: 0;
    margin-left: 600px;
  }
  ::v-deep.el-dialog__header {
    padding: 0;
  }
  ::v-deep.el-dialog__body {
    padding: 30px 0;
  }
}
.common_show_btn {
  display: flex;
  align-items: center;
  flex-direction: column;

  .btn_operat {
    span {
      display: inline-block;
      padding: 0 10px;
      color: $themeColor;
      cursor: pointer;
    }
  }

  .common_bg {
    position: relative;
    background-color: #f5f5f5;
    cursor: pointer;
    border-radius: 8px;

    .tips_wrapNo {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 1;
      z-index: 5;
      .name {
        color: #666;
        font-size: 13px;
        opacity: 1;
      }
    }
    .tips_wrap {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      z-index: 6;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: rgba(0, 0, 0, 0);
      opacity: 0;
      &:hover {
        opacity: 1;
        background: rgba(0, 0, 0, 0.5);
        .name {
          color: $themeColor;
          font-size: 13px;
        }
      }
    }
  }
  .bgMusic {
    width: 140px;
    height: 100px;
    .music_name {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .video1 {
        width: 40px;
        height: 40px;
        margin-top: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .music_box {
        display: flex;
        justify-content: center;
        align-items: center;
        .video2 {
          width: 14px;
          height: 16px;
        }
        .name {
          font-size: 12px;
          color: #999;
          margin-left: 4px;
        }
      }
    }
  }
}
.img_container {
  background: #f5f6f8;
  .head_wrap {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    .nav_wrap {
      flex: 1;
      display: flex;
      .nav_item {
        padding: 5px 20px;
        font-weight: 500;
        font-size: 15px;
        cursor: pointer;
        &.active {
          color: $themeColor;
        }
      }
    }
    .upload_wrap {
      padding-right: 40px;
    }
  }
  .infinite-list {
    height: 500px;
    padding: 20px 0 0 20px;
    .resource_item {
      display: inline-block;
      width: 200px;
      height: 160px;
      cursor: pointer;
      margin-right: 20px;
      margin-bottom: 20px;
      background-color: #fff;
      .img_wrap {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .video1 {
          width: 40px;
          height: 40px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .music_box {
          display: flex;
          justify-content: center;
          align-items: center;
          .video2 {
            width: 14px;
            height: 16px;
          }
          .name {
            font-size: 12px;
            color: #999;
            margin-left: 4px;
          }
        }
        .use {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 27px;
          font-size: 14px;
          color: #fff;
          line-height: 27px;
          text-align: center;
          background-color: $themeColor;
        }
        .currentUse {
          position: absolute;
          left: -24px;
          top: 10px;
          background-color: #29cc7a;
          color: #fff;
          z-index: 2;
          font-size: 11px;
          text-align: center;
          padding: 5px 20px;
          transform: rotate(-45deg);
          line-height: 1;
        }
      }
    }
  }
}
</style>